import { Card, Tabs } from "antd";
import { PhoneOutlined, UserOutlined } from "@ant-design/icons";
import Account from "./Account";
import Phone from "./Phone";
import styled from "styled-components";
import url from "@/asset/login_banner.webp";
const PanelStyled = styled.div`
  :where(.css-dev-only-do-not-override-e59m8p).ant-card {
    background-color: rgba(255, 255, 255, 0.7) !important;
  }

  .ant-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: 370px;
      height: 370px;
      img {
        width: 100%;
        object-fit: contain;
      }
    }
    .right {
      width: 280px;
    }
  }
`;

const Panel = () => {
  let components = [Account, Phone];
  return (
    <PanelStyled>
      <Card
        hoverable={true}
        style={{
          width: 700,
        }}
        className="my-card"
      >
        {/* 左边背景图 */}
        <div className="left">
          <img
            src={url}
            // src="https://www.hahacode.cn/admin/assets/login_banner.6e96327c.webp"
            alt=""
          />
        </div>
        {/* 右侧登录界面 */}
        <div className="right">
          <Tabs
            centered
            defaultActiveKey="1"
            items={[UserOutlined, PhoneOutlined].map((Icon, i) => {
              let Component = components[i];
              const id = String(i + 1);
              return {
                label: (
                  <span>
                    <Icon />
                    Tab {id}
                  </span>
                ),
                key: id,
                children: <Component></Component>,
              };
            })}
          />
        </div>
      </Card>
    </PanelStyled>
  );
};

export default Panel;
